<template>
  <div v-show="visible" class="captcha-wrap">
    <div ref="captchaBody" class="captcha-body" />
  </div>
</template>

<script>
  import './js/tac.min.js'
  import './css/tac.css'

  export default {
    data() {
      return {
        visible: false,
      }
    },

    methods: {
      load(config) {
        this.visible = true

        // 将配置合并到默认配置中
        const assignConfig = {
          // 生成接口 (必选项,必须配置, 要符合tianai-captcha默认验证码生成接口规范)
          // 该接口应该根据项目设置,必须传参
          requestCaptchaDataUrl: config.requestCaptchaDataUrl,

          // 验证接口 (必选项,必须配置, 要符合tianai-captcha默认验证码校验接口规范)
          // 该接口应该根据项目设置,必须传参
          validCaptchaUrl: config.validCaptchaUrl,

          // 验证成功回调函数(必选项,必须配置)
          // 该回调函数应该根据项目设置,必须传参
          validSuccess: (res, c, tac) => {
            // 销毁验证码服务
            tac.destroyWindow()

            // 关闭验证码
            this.visible = false

            // console.log('验证成功，后端返回的数据为', res)

            // 执行回调
            config.validSuccess(res, c, tac)
          },

          // 验证失败的回调函数(可忽略，如果不自定义 validFail 方法时，会使用默认的)
          validFail: (res, c, tac) => {
            // console.log('验证码验证失败回调...')

            // 验证失败后重新拉取验证码
            tac.reloadCaptcha()

            if (config.validFail) {
              config.validFail(res, c, tac)
            }
          },

          // 绑定的div
          bindEl: this.$refs.captchaBody,

          // 刷新按钮回调事件
          btnRefreshFun: (el, tac) => {
            // console.log('刷新按钮触发事件...')
            tac.reloadCaptcha()

            if (config.btnRefreshFun) {
              config.btnRefreshFun(el, tac)
            }
          },

          // 关闭按钮回调事件
          btnCloseFun: (el, tac) => {
            // console.log('关闭按钮触发事件...')
            tac.destroyWindow()
            this.visible = false

            if (config.btnCloseFun) {
              config.btnCloseFun(el, tac)
            }
          },
        }
        new TAC(assignConfig).init()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .captcha-wrap {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;

    // 验证码容器,屏幕中间
    .captcha-body {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
</style>
